<template>
	<view class="helpCenter" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="helpContent">
			<view class="help_box">
				<view class="help_name font38">{{ questions.index + 1 }}.{{ questions.questionTitle }}</view>
				<text class="time_txt font28">{{ questions.gmtCreate }}</text>
			</view>
			<view class="content" style="padding: 40rpx;">
				<!-- <u-parse :content="questions.answer"></u-parse> -->
				<view class="answer font32" v-html="questions.answer"></view>
				
				</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			globalColor: getApp().globalData.globalColor,
			theme: getApp().globalData.appTheme,
			questions: {}
		};
	},
	methods: {
		preViewImg(src) {
			uni.previewImage({
				urls: [src],
				current: 1
			});
		},
		editString(htmlstr) {
			// 匹配图片
			var regex1 = new RegExp('(i?)(\<img)(?!(.*?style=[\'"](.*)[\'"])[^\>]+\>)', 'gmi');
			//给不含style="" 或 style='' 的img标签加上style=""
			htmlstr = htmlstr.replace(regex1, '$2 style=""$3');
			//正则匹配含有style的img标签
			var regex2 = new RegExp('(i?)(\<img.*?style=[\'"])([^\>]+\>)', 'gmi');
			htmlstr = htmlstr.replace(regex2, '$2max-width:100%;height:auto;border-radius:12rpx;$3');
			
			// 匹配视频
			const html = htmlstr; // 假设这是要匹配的HTML字符串
			const regex = /<video.*?>.*?<\/video>/gi; // 匹配video标签的正则表达式
			const style = 'width: 100%;'; // 要添加的style样式
			const newHtml = html.replace(regex, (match) => {
			  return match.replace(/<video/gi, `<video style="${style}"`); // 为匹配到的video标签添加style样式
			});
			return newHtml;
		}
	},
	onLoad() {
		let _this = this;
		uni.getStorage({
			key: 'questions',
			success: function(res) {
				_this.questions = res.data;
				_this.questions.answer = _this.editString(_this.questions.answer);
			}
		});
		// 	this.$nextTick(() => {

		// 		let video = query.selectAll('video');

		// 		let imgs = query.selectAll('img');

		// 		console.log('元素====', spans);
		// 		设置文字颜色（设置none 继承父元素颜色）
		// 		if (spans.length != 0) {
		// 			spans.forEach(item => {
		// 				item.setAttribute('style', 'color: none');
		// 			});
		// 		}
		// 		设置视频最大宽度
		// 		if (video.length != 0) {
		// 			video.forEach(item => {
		// 				item.setAttribute('style', 'max-width:100%');
		// 			});
		// 		}
		// 		图片增加点击查看事件
		// 		if (imgs.length != 0) {
		// 			let self = this;
		// 			imgs.forEach(item => {
		// 				let src = item.src;
		// 				item.onclick = function(e) {
		// 					self.preViewImg(src);
		// 				};
		// 			});
		// 		}
		// 	});
	}
};
</script>

<style lang="scss" scoped>
/deep/ .answer {
	img {
		max-width: 100%;
		border-radius: 12rpx;
	}
}

.helpCenter {
	min-height: 100vh;
	background-color: var(--viewBgColor);
	.help_box {
		padding: 40rpx;
		padding-bottom: 0;
		.help_name {
			margin-bottom: 20rpx;
			font-weight: bold;
			line-height: 50rpx;
			color: var(--titleFontColor);
		}
		.time_txt {
			color: var(--contentFontFourColor);
		}
		.img_right {
			width: 26rpx;
			height: 26rpx;
		}
	}
	.answer {
		color: var(--contentFontDarkColor);
		line-height: 44rpx;
	}
}
</style>
